<template>
	<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
		<el-form-item class="w_180" v-if="options.includes('shop')">
			<el-select v-model="query.shop_id" filterable placeholder="店铺名称" clearable>
				<el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
			</el-select>
		</el-form-item>
		<el-form-item class="w_120" v-if="options.includes('city')">
			<el-select v-model="query.city_id" placeholder="城市" @change="changeCity">
				<el-option v-for="item in cityList" :key="item.id" :label="item.city_name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item v-if="options.includes('area')">
			<el-select v-model="query.area_id" multiple collapse-tags placeholder="商圈" @change="changeArea">
				<el-button
					size="mini"
					type="primary"
					class="round-right all-area"
					@click="selectAllArea()"
					native-type="button"
					>{{ areaStatus ? '全选' : '取消全选' }}</el-button
				>
				<el-option v-for="item in areaList" :key="item.id" :label="item.area_name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item class="w_100" v-if="options.includes('industry')">
			<el-select v-model="query.industry" placeholder="行业" @change="changeIndustry()" clearable>
				<el-option v-for="item in industryJobList" :key="item.id" :label="item.label_name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item class="w_100" v-if="options.includes('jobType')">
			<el-select v-model="query.label_id" placeholder="岗位名称" clearable>
				<el-option v-for="item in jobList" :key="item.id" :label="item.label_name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item class="w_100" v-if="options.includes('status')">
			<el-select v-model="query.status" placeholder="状态" clearable>
				<el-option label="启用" value="1"></el-option>
				<el-option label="停用" value="2"></el-option>
				<el-option label="已过期" value="3"></el-option>
			</el-select>
		</el-form-item>
		<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn">搜索</el-button>
		<el-button size="mini" round @click="resetBtn">重置</el-button>
	</el-form>
</template>

<script>
import { fetchIndustryJob } from '@/api/label.js'
import { fetchAreaList, fetchShopList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'subsidy-shop',
	data() {
		return {
			shopList: [],
			areaList: [],
			cityList: [],
			jobList: [],
			industryJobList: [],
			query: {
				shop_id: '',
				city_id: '',
				area_id: [],
				industry: '',
				label_id: '',
				status: ''
			},
			areaStatus: true
		}
	},

	props: {
		options: {
			type: Array,
			default: ''
		}
	},

	mounted() {
		this.getcityList()
	},

	methods: {
		//店铺列表
		async getShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30, //已合作的店铺
					status: 1, //启用的店铺
					city_id: this.query.city_id,
					area_id: this.query.area_id.join(',')
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.shopList = ret.list
			} catch (err) {
				console.log(err)
			}
		},

		// 获取城市列表
		async getcityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list

				if (ret.list.length <= 0) return

				this.query.city_id = ret.list[0].id
				this.getShopList()
				this.listArea()
				this.getIndustryJob()
				this.searchChange()
			} catch (err) {
				console.log('err:', err)
			}
		},

		//获取商圈列表
		async listArea() {
			try {
				this.s_time_slot = []
				let ret = await fetchAreaList({
					city_id: this.query.city_id
				})
				let area = []
				ret.list.forEach(item => {
					if (item.id != 0) area.push(item)
				})

				this.areaList = area
			} catch (error) {
				console.log('error:', error)
			}
		},

		// 城市监听
		changeCity() {
			for (let key in this.query) {
				if (key != 'city_id') this.query[key] = ''
				if (key == 'area_id') this.query[key] = []
			}
			this.jobList = []
			if (!this.query.city_id) return

			this.getShopList()
			this.listArea()
			this.getIndustryJob()
			this.searchChange()
		},

		changeArea() {
			this.query.shop_id = ''
			this.shopList = []
			this.getShopList()
		},

		// 搜索
		shearchBtn() {
			this.pageNum = 1
			this.searchChange()
		},

		//重置
		resetBtn() {
			this.pageNum = 1
			this.changeCity()
		},

		// 行业
		async getIndustryJob() {
			try {
				let ret = await fetchIndustryJob({
					city_id: this.query.city_id
				})
				this.industryJobList = ret
			} catch (err) {
				console.log(err)
			}
		},

		// 行业监听
		changeIndustry() {
			this.query.label_id = ''

			if (!this.query.industry) return (this.jobList = [])

			this.jobList = this.industryJobList.find(x => +x.id === +this.query.industry).children
		},

		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(item.id)
			})
			this.query.area_id = this.areaStatus ? arr : []

			this.areaStatus = !this.areaStatus
		},

		// 组件回传
		searchChange() {
			// 没有传店铺那不需要回传店铺
			if (!this.options.includes('shop')) delete this.query.shop_id

			this.$emit('sendValue', this.query)
		}
	}
}
</script>



// WEBPACK FOOTER //
// src/components/subsidy/components/SubsidySearch.vue